// 这个文件就是webpack的配置文件

// webpack的配置文件时用Node.js写的，里面要使用CommonJs规范
const path = require("path");
// 插件需要引入
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 设置打包的环境 production生产环境 development开发环境
  mode: "production",

  // 设置入口文件
  // entry: "./src/main.js",
  entry: path.resolve(__dirname, "./src/main.js"),

  // 设置出口的位置
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },

  // module就是loader转换器
  // rules是一个数组，数组里面的每一个对象，就是一种转换规则
  // 转换器是需要安装的, 但是不需要引入
  module: {
    rules: [
      { test: /\.txt$/, use: "raw-loader" },
      {
        test: /\.css$/,
        // css-loader是将css转成js
        // style-loader将js转回成css
        // 先用到的loader要写在后面
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  // 插件，除了转换以外的事情，由插件来完成
  // plugins是一个数组，里面是一个个的插件实例
  // 插件需要安装并且引入
  plugins: [
    new HtmlWebpackPlugin({
      template: path.relative(__dirname, "./src/public/index.html"),
      filename: "./index.html",
      hash: true,
    }),
  ],
};
